<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="logo">
        <image class="" src="../../../../static/images/cancellation/cancellationLogo.png"
          mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
        <view class="desc"> 期待与您再次相遇 </view>
      </view>

      <view class="form">
        <view class="input">
          <uni-easyinput prefixIcon="phone" v-model="phonenumber" placeholder="请输入手机号码" maxlength="11">
          </uni-easyinput>
        </view>

        <view class="input">
          <uni-easyinput prefixIcon="email" v-model="smsCode" placeholder="请输入验证码">
            <template #right>
              <view @click="getCode" v-if="isshowSeconds" class="code">获取验证码</view>
              <view v-else>{{ seconds }}s重新获取</view>
            </template>
          </uni-easyinput>
        </view>
      </view>

      <view class="btn" @click="handleDelect">确认注销 </view>

      <view class="consent">
        <text class="text" selectable="false" space="false" decode="false">
          <label class="radio">
            <radio value="r2" />未选中
          </label> 我已阅读并同意<text class="textAccount" @click="handleToUserAgreement">《账号注销协议》</text>
        </text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { captchaSmsOut, writeOff } from "@/api/login.js";
import { verifyMobile } from '@/utils/toast'

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "账号注销",
      },

      items: [],
      value: "",
      code: "",
      seconds: 60,
      isshowSeconds: true,
      phonenumber: "",
      smsCode: "",
      isAgree: true,
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  methods: {
    // 重新获取验证码
    getCode() {
      if (verifyMobile(this.phonenumber)) {
        this.getCaptchaSms();
      }
    },
    getCaptchaSms() {
      let phonenumber = this.phonenumber;
      captchaSmsOut({
        phonenumber,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          let timer = ''
          this.isshowSeconds = false;
          var that = this;
          timer = setInterval(() => {
            that.seconds = that.seconds - 1;
            if (that.seconds === 0) {
              clearInterval(timer);
              (that.isshowSeconds = true), (that.seconds = 60);
            }
          }, 1000);
          this.smsCode = res.data;
          uni.showToast({
            title: "验证码已发送！",
            icon: "none",
          });
        }
      });
    },

    // 跳转用户协议
    handleToUserAgreement() {
      uni.navigateTo({
        url: "/subPage/enterprise/mine/details/userAgreement?type=1",
      });
    },

    // 注销账号
    handleDelect() {
      writeOff({
        phonenumber: this.phonenumber,
        smsCode: this.smsCode
      }).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: '注销成功',
            duration: 1000,
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/recruit/login/index'
            })
          }, 1000)
        }
      })
    },

    toPath(path) {
      if (path === "") return;

      uni.navigateTo({
        url: `/${path}`,
      });
    },

    confirm() { },
  },
};
</script>
<style lang="scss" scoped>
.Water {
  height: 100vh;
  width: 100%;
  background-color: #ffffff;

  .scroll {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32rpx;

    .logo {
      margin-top: 150rpx;
      margin-left: 94rpx;
      margin-bottom: 114rpx;

      image {
        width: 170rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }

      .desc {
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        font-size: 32rpx;
        color: #00000073;
        letter-spacing: 0;
        line-height: 46rpx;
      }
    }

    .form {
      .code {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 28rpx;
        color: #317ed0;
        letter-spacing: 0;
        text-align: right;
        padding-right: 32rpx;
      }

      .input {
        margin-bottom: 24rpx;

        ::v-deep .uni-easyinput__content {
          height: 106rpx;
          border: 1rpx solid #e2e2e2;
          border-radius: 24rpx;
        }
      }
    }

    .btn {
      width: 420rpx;
      height: 90rpx;
      line-height: 88rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;

      text-align: center;
      margin: 0 auto;
      margin-top: 450rpx;
      margin-bottom: 32rpx;
    }

    .consent {
      width: 368rpx;
      margin: 0 auto;


      .text {
        color: #000000a3;
        font-size: 24rpx;
        font-face: PingFangSC;
        font-weight: 500;

        text-align: right;
      }
    }
  }

  .textAccount {
    color: #317ed0;
  }
}
</style>
